<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="example1">
			<button v-on:click="say('hi')">Say hi</button>
			<button v-on:click="say('what')">Say what</button>
			
			
			<button v-on:click="warn('sdfdsaf',$event)">Submit</button>
		
		<!-- 阻止单击事件继续传播 -->
		<a v-on:click.stop="doThis"></a>
		
		<!-- 提交事件不再重载页面 -->
		<form v-on:submit.prevent="onSubmit"></form>
		
		<!-- 修饰符可以串联 -->
		<a v-on:click.stop.prevent="doThat"></a>
		
		<!-- 只有修饰符 -->
		<form v-on:submit.prevent></form>
		
		<!-- 添加事件监听器时使用事件捕获模式 -->
		<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
		<div v-on:click.capture="doThis">...</div>
		
		<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
		<!-- 即事件不是从内部元素触发的 -->
		<div v-on:click.self="doThat">...</div>
			
			<div v-on:scroll.passive="onScroll">fffff</div>

		<!-- 输入回车之后触发 -->
		<input v-model="enterValue" v-on:keyup.enter="submit" id="enterValue" />
		
		
		
		<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
		<button v-on:click.ctrl="onClick">A</button>
		
		<!-- 有且只有 Ctrl 被按下的时候才触发 -->
		<button v-on:click.ctrl.exact="onCtrlClick">A</button>
		
		<!-- 没有任何系统修饰符被按下的时候才触发 -->
		<button v-on:click.exact="onClick">A</button>
		
		</div>	
		<!-- 事件修饰符
		 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
		 
		 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
		 
		 .prevent  提交事件不再重载页面
		 .capture
		 .self
		 .once
		 .passive
		
		 -->
		<script type="text/javascript">
			let app=new Vue({
				el:'#example1',
				data:{
					counter:0,
					enterValue:''
				},
				methods:{
					say:function(value){
						alert(value);
					},
					warn:function(value,event){
						if(event){
							console.log(event.preventDefault());
						}
						alert(value)
					},
					doThis:function(){
						console.log('kk');
					},
					submit:function(){
						console.log(this.enterValue);
					},
					onClick:function(){
						console.log('onClick');
					},
					onCtrlClick:function(){
						console.log('onCtrlClick');
					},
				}
			})
		</script>	
		<style type="text/css">
			
		</style>
	</body>
</html>
